<template>
  <!-- 推送设置弹窗 -->
  <vc-dialog v-model="show" width="60%" height="60vh" title="推送设置" title-align="left">
    <div class="container">
      <div class="left-group-list">
        <div v-for="group in groups" class="group" :class="{ 'group-active': activeGroup.id === group.id }" @click="activeGroup = group">
          <span>{{ group.name }}</span>
          <i class="icon-arrow"></i>
        </div>
      </div>
      <div class="right-content">
        <div class="row">
          <span class="left">开启消息推送</span>
          <span class="right">
            <el-switch style="--el-switch-on-color: #02C680" v-model="pushState" :before-change="handleStateChange" />
            <span class="tip">实时推送监控动态至绿舟WEB端/APP端的消息中心</span>
          </span>
        </div>
      </div>
    </div>
  </vc-dialog>
</template>

<script setup lang="ts">
import { type IGroup, getPushSetting, type PushSettingParams, setPushSetting } from '../apis';

interface Props {
  modelValue: boolean;
  group: IGroup;
}
const { modelValue, group } = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void;
}>();

/** 自定义v-model */
const show = computed({
  get() {
    return modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

const groups = ref<any>([]);

const activeGroup = ref({
  id: group.id,
  name: group.name,
  realTimeStatus: group.closePush ? 0 : 1
});

const pushState = ref(true);

const getGroups = async () => {
  const res = await getPushSetting();
  groups.value = res.map((item) => {
    return {
      id: +item.groupId,
      name: item.groupName,
      realTimeStatus: item.realTimeStatus
    };
  });
};
getGroups();

const handleStateChange = () => {
  const params: PushSettingParams = {
    realTimeStatus: +!pushState.value
  };
  return new Promise(async (resolve, reject) => {
    const res = await setPushSetting(activeGroup.value.id, params);
    if (res.code === 200) {
      groups.value.forEach((g) => {
        if (g.id === activeGroup.value.id) {
          g.realTimeStatus = params.realTimeStatus;
        }
      });
      return resolve(true);
    } else {
      return reject(new Error('修改推送设置失败'));
    }
  });
};

watch(
  () => activeGroup.value.id,
  () => {
    pushState.value = activeGroup.value.realTimeStatus ? true : false;
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  .left-group-list {
    width: 20%;
    height: 100%;
    overflow-y: auto;
    @include scroll-bar(#c0c4cc, 2px);
    border-right: 1px solid #f3f3f3;
    .group {
      margin: 7px 0 4px 0;
      padding: 0 16px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      cursor: pointer;
      .icon-arrow {
        display: inline-block;
        width: 10px;
        height: 10px;
        transition: all 0.2s;
        background-image: url('');
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
    .group-active {
      color: #02C680;
      background-color: rgba(231,247,243,0.3);
      border-right: 3px solid #02C680;
      .icon-arrow {
        transform: rotate(180deg);
      }
    }
  }
  .right-content {
    width: 80%;
    height: 100%;
    overflow-y: auto;
    @include scroll-bar(#c0c4cc, 2px);
    .row {
      padding: 18px 23px;
      .left {
        margin-right: 88px;
        font-size: 14px;
        font-weight: 500;
        color: #333;
      }
      .right {
        .tip {
          margin-left: 17px;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>
